<template>
  <div class="privacy-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-bg"></div>
      <div class="header-content">
        <h1 class="page-title">隐私政策</h1>
        <p class="page-subtitle">保护您的隐私是我们的责任</p>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <div class="container">
        <div class="privacy-content">
          <div class="content-intro">
            <p>欢迎您使用校园二手交易平台。本隐私政策旨在向您说明我们如何收集、使用、存储和保护您的个人信息，以及您享有的相关权利。请您仔细阅读本隐私政策，了解我们的信息处理实践。</p>
          </div>

          <section class="privacy-section">
            <h2 class="section-title">1. 信息收集与使用</h2>
            <div class="section-content">
              <h3 class="subsection-title">1.1 我们收集的信息</h3>
              <ul class="content-list">
                <li class="list-item">
                  <strong>注册信息：</strong>当您注册账号时，我们会收集您提供的手机号码、密码等信息。
                </li>
                <li class="list-item">
                  <strong>个人资料信息：</strong>您可以选择提供昵称、头像、性别、所在学校等信息以完善您的个人资料。
                </li>
                <li class="list-item">
                  <strong>交易信息：</strong>当您发布商品、购买商品或进行其他交易活动时，我们会收集与交易相关的信息，如商品信息、价格、交易状态等。
                </li>
                <li class="list-item">
                  <strong>联系信息：</strong>为了完成交易，您可能需要提供收货地址、联系电话等信息。
                </li>
                <li class="list-item">
                  <strong>设备与日志信息：</strong>我们会自动收集您使用我们服务时的设备信息、浏览器类型、操作系统版本、访问时间、访问IP地址等日志信息。
                </li>
              </ul>

              <h3 class="subsection-title">1.2 信息使用方式</h3>
              <ul class="content-list">
                <li class="list-item">提供、维护和改进我们的服务</li>
                <li class="list-item">处理您的注册、登录、商品发布、购买等请求</li>
                <li class="list-item">完成交易和支付流程</li>
                <li class="list-item">向您发送交易通知、系统消息等</li>
                <li class="list-item">进行用户身份验证和安全保障</li>
                <li class="list-item">分析用户行为，优化用户体验</li>
                <li class="list-item">提供个性化的推荐和服务</li>
              </ul>
            </div>
          </section>

          <section class="privacy-section">
            <h2 class="section-title">2. 信息存储与保护</h2>
            <div class="section-content">
              <h3 class="subsection-title">2.1 信息存储期限</h3>
              <p class="content-text">我们会在实现本隐私政策所述目的所需的期限内保留您的个人信息，除非法律要求或允许更长的保留期限。</p>

              <h3 class="subsection-title">2.2 信息保护措施</h3>
              <ul class="content-list">
                <li class="list-item">采用加密技术保护数据传输和存储</li>
                <li class="list-item">实施访问控制机制，确保只有授权人员可以访问个人信息</li>
                <li class="list-item">定期进行安全审计和漏洞扫描</li>
                <li class="list-item">制定数据安全事件响应预案</li>
                <li class="list-item">对员工进行数据安全培训</li>
              </ul>
            </div>
          </section>

          <section class="privacy-section">
            <h2 class="section-title">3. 信息共享与披露</h2>
            <div class="section-content">
              <h3 class="subsection-title">3.1 信息共享</h3>
              <ul class="content-list">
                <li class="list-item">在获得您的明确同意后，我们会与第三方共享您的个人信息</li>
                <li class="list-item">为了完成交易，我们可能会与交易相关方共享必要的信息</li>
                <li class="list-item">与我们的服务提供商共享信息，这些服务提供商只能将信息用于提供服务的目的</li>
                <li class="list-item">在合并、收购或资产转让时，我们会将您的信息转让给相关主体</li>
              </ul>

              <h3 class="subsection-title">3.2 信息披露</h3>
              <ul class="content-list">
                <li class="list-item">根据法律法规的要求披露</li>
                <li class="list-item">响应政府机构、司法机关的合法要求</li>
                <li class="list-item">保护我们的合法权益、财产或安全</li>
                <li class="list-item">保护用户或公众安全</li>
              </ul>
            </div>
          </section>

          <section class="privacy-section">
            <h2 class="section-title">4. 用户权利</h2>
            <div class="section-content">
              <p class="content-text">您对您的个人信息享有以下权利：</p>
              <ul class="content-list">
                <li class="list-item">访问权：您有权访问我们持有的关于您的个人信息</li>
                <li class="list-item">更正权：您有权要求我们更正不准确的个人信息</li>
                <li class="list-item">删除权：在特定情况下，您有权要求我们删除您的个人信息</li>
                <li class="list-item">限制处理权：在特定情况下，您有权限制我们对您个人信息的处理</li>
                <li class="list-item">数据可携带权：您有权以结构化、常用和机器可读的格式接收您提供的个人信息</li>
                <li class="list-item">反对权：在特定情况下，您有权反对我们对您个人信息的处理</li>
                <li class="list-item">撤回同意权：对于基于您同意的处理，您有权随时撤回同意</li>
              </ul>
            </div>
          </section>

          <section class="privacy-section">
            <h2 class="section-title">5. Cookie和类似技术的使用</h2>
            <div class="section-content">
              <p class="content-text">我们使用Cookie和类似技术来提供、保护和改进我们的服务，包括：</p>
              <ul class="content-list">
                <li class="list-item">记住您的登录状态和偏好设置</li>
                <li class="list-item">提供个性化的内容和服务</li>
                <li class="list-item">分析网站使用情况，优化用户体验</li>
                <li class="list-item">检测和防止欺诈活动</li>
              </ul>
              <p class="content-text">您可以通过浏览器设置管理或删除Cookie，但这可能会影响我们服务的正常使用。</p>
            </div>
          </section>

          <section class="privacy-section">
            <h2 class="section-title">6. 未成年人保护</h2>
            <div class="section-content">
              <p class="content-text">我们非常重视对未成年人个人信息的保护。如果您是未满18周岁的未成年人，在使用我们的服务前，应当事先取得您的父母或法定监护人的同意。</p>
              <p class="content-text">对于经父母或法定监护人同意而收集的未成年人个人信息，我们只会在法律允许、父母或监护人明确同意或者保护未成年人所必要的范围内使用或公开披露。</p>
            </div>
          </section>

          <section class="privacy-section">
            <h2 class="section-title">7. 隐私政策的更新</h2>
            <div class="section-content">
              <p class="content-text">我们可能会不时更新本隐私政策。当我们对隐私政策作出重大变更时，我们会通过网站公告、站内信等方式通知您。请您定期查看本隐私政策的最新版本。</p>
              <p class="content-text">本隐私政策的更新时间：2024年11月10日</p>
            </div>
          </section>

          <section class="privacy-section">
            <h2 class="section-title">8. 联系我们</h2>
            <div class="section-content">
              <p class="content-text">如果您对本隐私政策有任何疑问、意见或建议，或者您希望行使您的数据主体权利，请通过以下方式联系我们：</p>
              <div class="contact-info">
                <p class="contact-item">
                  <el-icon class="contact-icon"><i-ep-message /></el-icon>
                  客服邮箱：support@campustrade.com
                </p>
                <p class="contact-item">
                  <el-icon class="contact-icon"><i-ep-phone /></el-icon>
                  客服电话：400-123-4567（工作日 9:00-18:00）
                </p>
                <p class="contact-item">
                  <el-icon class="contact-icon"><i-ep-location /></el-icon>
                  公司地址：校园科技园区A座501室
                </p>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // 设置页面标题
  document.title = '隐私政策 - 校园二手交易平台'
})
</script>

<style scoped>
.privacy-container {
  min-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
}

/* 页面头部样式 */
.page-header {
  position: relative;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
  z-index: 1;
}

.header-content {
  position: relative;
  z-index: 2;
}

.page-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.page-subtitle {
  font-size: 16px;
  opacity: 0.9;
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  padding: 60px 0;
  background-color: #f8f9fa;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.privacy-content {
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.content-intro {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.content-intro p {
  font-size: 16px;
  line-height: 1.8;
  color: #666;
}

/* 隐私政策章节样式 */
.privacy-section {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.privacy-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
  position: relative;
  padding-left: 20px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 25px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.section-content {
  color: #666;
  padding-left: 20px;
}

.subsection-title {
  font-size: 18px;
  font-weight: 600;
  color: #444;
  margin: 25px 0 15px 0;
}

.subsection-title:first-child {
  margin-top: 0;
}

.content-text {
  line-height: 1.8;
  margin-bottom: 15px;
}

.content-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
}

.list-item {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.list-item::before {
  content: '•';
  position: absolute;
  left: 10px;
  color: #667eea;
  font-size: 18px;
  line-height: 1;
}

/* 联系信息样式 */
.contact-info {
  margin-top: 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  color: #666;
}

.contact-item:last-child {
  margin-bottom: 0;
}

.contact-icon {
  color: #667eea;
  font-size: 20px;
  width: 24px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 30px;
  }
  
  .privacy-content {
    padding: 30px 20px;
  }
  
  .section-title {
    font-size: 22px;
  }
  
  .subsection-title {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .page-header {
    height: 200px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .privacy-content {
    padding: 20px 15px;
  }
  
  .section-title {
    font-size: 20px;
    padding-left: 15px;
  }
  
  .section-content {
    padding-left: 15px;
  }
  
  .list-item {
    padding-left: 20px;
  }
  
  .contact-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}
</style>